<!doctype html>
<html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Raleway" rel="stylesheet">
    <style type="text/css">

      html {
        box-sizing: border-box;
      }
      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      body {
        background-color: hsl(200, 80%, 30%);
        background-image: radial-gradient(hsl(200, 80%, 30%), hsl(210, 80%, 20%));
        color: white;
        font-family: Raleway, Helvetica, Arial, sans-serif;
        line-height: 1.4;
        margin: 0;
        min-height: 100vh;
      }

      h1, h2, h3 {
        font-family: Alfa Slab One, serif;
        font-weight: 400;
      }

      main {
        display: block;
      }

      img {
        max-width: 100%;
      }

      .page-header {
        margin: 0;
        padding: 1rem;
      }

      @media (min-width: 30em) {
        .page-header {
          padding: 2rem 2rem 3rem;
        }
      }

      .nav-links {
        display: flex;
        margin-top: 0;
        margin-bottom: 1rem;
        padding: 0 1rem;
        list-style: none;
        justify-content: space-between;
      }
      .nav-links > li + li {
        margin-left: 0.8em;
      }
      .nav-links > li > a {
        display: block;
        padding: 0.8em 0;
        color: white;
        font-size: 0.8rem;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .nav-links__icon {
        height: 1.5em;
        width: 1.5em;
        vertical-align: -0.2em;
      }
      .nav-links > li > a:hover {
        color: hsl(40, 100%, 70%);
      }

    </style>
  </head>
  <body>
    <header>
      <h1 class="page-header">The Yolk Factory</h1>
    </header>
    <nav class="main-nav">
      <ul class="nav-links">
        <li>
          <a href="/">
            <img src="images/home.svg" class="nav-links__icon"/>
            <span class="nav-links__label">Home</span>
          </a>
        </li>
        <li>
          <a href="/events">
            <img src="images/calendar.svg" class="nav-links__icon"/>
            <span class="nav-links__label">Events</span>
          </a>
        </li>
        <li>
          <a href="/members">
            <img src="images/members.svg" class="nav-links__icon"/>
            <span class="nav-links__label">Members</span>
          </a>
        </li>
        <li>
          <a href="/about">
            <img src="images/star.svg" class="nav-links__icon"/>
            <span class="nav-links__label">About</span>
          </a>
        </li>
      </ul>
    </nav>
  </body>
</html>
